﻿<template>
<div id="app">
  <div class="col-md-12">
  <loaddevicesingle></loaddevicesingle>
  <form class="form-inline" style="text-align:left;">
  <label for="name">&nbsp;设备编号:</label>
  <input type="text"  autocomplete="off"  class="form-control" onclick="showMenudevicesingle(this)"  id="device_id" placeholder="请输入设备编号" maxlength="12" >

  <label for="name">&nbsp;类型:</label>
     <select  id="typecx" class="form-control"><option value="">--全部-</option> 
	<option value="0">单色</option> 
  <option value="1">双色</option>
  <option value="2">全彩</option> 
  <option value="3">安卓</option>
		</select>
   <button type="button" class="btn btn-primary">查询</button>
   <!--<button type="button" class="btn btn-primary"  >开启</button>
 <button type="button" class="btn btn-primary" id="add"  data-toggle="modal" data-target="#myModal">关闭</button>!-->
  <button type="button" class="btn btn-success" id="update" style="display:none"  data-toggle="modal" data-target="#myModal">新增</button>
  </form>
<b></b>
<div  class="col-md-6 allmap"  style="margin:5px 0"  id="map_canvas">  </div>
  </div> 
   </div>
</template>
<style>
/*@import '../../../../static/css/ztree/metroStyle.css';*/
@import "../../../../static/css/ztree/metroStyle.css";
</style>
<script>
import loaddevicesingle from "@/views/tree/devicesingle.vue";
//坐标转换完之后的回调函数
export default {
  name: "app",
  data() {
    return {};
  },
  mounted() {},
  methods: {},
  components: {
    loaddevicesingle: loaddevicesingle
  }
};
$(function(){
$(".btn-primary").click(function(){
  baidu_tmp_data = new Array(),
        opts = {
        width : 250,     // 信息窗口宽度
        height: 140,     // 信息窗口高度
        title : "设备信息" , // 信息窗口标题
        enableMessage:true,//设置允许信息窗发送短息
        message:""
    };

init();  //异步加载地图

});
$("#menuContentdevicesingle").css("margin","")
$("#menuContentdevicesingle").css("margin","34px 68px")
});
var vali=0;
window.group=function(array, subGroupLength) {
      let index = 0;
      let newArray = [];
      while(index < array.length) {
     
          newArray.push(array.slice(index, index += subGroupLength));
      }
      return newArray;
  }
    //百度地图API功能
    window.loadJScript=function(){
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://api.map.baidu.com/api?v=2.0&ak=2pxYNNwIfR34G5mLT1BhMP40&callback=init";
        document.body.appendChild(script);
    };
     var map,
        baidu_tmp_data = new Array(),
        opts = {
        width : 250,     // 信息窗口宽度
        height: 140,     // 信息窗口高度
        title : "设备信息" , // 信息窗口标题
        enableMessage:true,//设置允许信息窗发送短息
        message:""
    };
      window.init=function() {
    // baidu_tmp_data = new Array(),
    //     opts = {
    //     width : 250,     // 信息窗口宽度
    //     height: 140,     // 信息窗口高度
    //     title : "设备信息" , // 信息窗口标题
    //     enableMessage:true,//设置允许信息窗发送短息
    //     message:""
    // };
    
        map = new BMap.Map("map_canvas");            // 创建Map实例
        var point = new BMap.Point(116.404, 39.915); // 创建点坐标
        map.centerAndZoom("深圳",5);
        map.enableScrollWheelZoom();                 //启用滚轮放大缩小
        //var result = ajaxGetData()
        //DeviceManagement/queryDeviceGPRSInfo 参数 companyId 公司id ，devicenumber设备号，deviceType 设备类型 
    $.ajax({
    type: "POST",
    url: domain.testUrl+"/Threeinjection/DeviceManagement/queryDeviceGPRSInfo?companyId="+sessionStorage.getItem("coid")+"&devicenumber="+$("#device_id").val()+"&deviceType="+$("#typecx").val(),
    data:{sessionid:sessionStorage.getItem("sid")},
    success: function (response) {
      var  data=JSON.parse(response);
      // data=[{"companyId":0,"devicenumber":"190801WY2001","gps":0,"high":16,"isonline":1,"lastofflinecause":0,"lastonlinetime":1565000852000,"latitude":34.611858,"longitude":119.197093,"maxPSDnum":0,"maxprogramnum":0,"maxregionnum":0,"status":0,"type":0,"width":128},{"companyId":0,"devicenumber":"190803WY2101","gps":0,"high":16,"isonline":2,"lastofflinecause":0,"lastonlinetime":1564968923000,"latitude":22.657433,"longitude":113.913003,"maxPSDnum":0,"maxprogramnum":0,"maxregionnum":0,"status":0,"type":0,"width":128},{"companyId":0,"devicenumber":"190803WY2102","gps":0,"high":16,"isonline":2,"lastofflinecause":0,"lastonlinetime":1564882618000,"latitude":22.657221,"longitude":113.91276,"maxPSDnum":0,"maxprogramnum":0,"maxregionnum":0,"status":0,"type":0,"width":128}]
vali=0;
    // console.log(response);
    //  return;
        if(data.length < 0){

            return false;
        }
         try{
            var groupedArray = group(data, 100);
            console.log(groupedArray);

  load(groupedArray);
         }catch(ex){

           console.log(ex);
         }
    }
          });
    }

    window.addClickHandler=function(content,marker){
        marker.addEventListener("click",function(e){
            openInfo(content,e)}
        );
    }
    window.openInfo=function(content,e){
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象
        map.openInfoWindow(infoWindow,point); //开启信息窗口
    }
    //坐标转换完之后的回调函数
    // window.translateCallback = function (data){
    
    //     if(data.status === 0) {
    //         for(var i=0;i<data.points.length;i++){
    //             baidu_tmp_data.push(data.points[i]);
    //         }
    //     }
    // }
window.onload = loadJScript;  //异步加载地图
window.load=function(groupedArray){
  
    try{
for(var i=0; i<groupedArray.length;i++){
var dataval="";
var listda= [];
for(var k=0;k<groupedArray[i].length;k++){
 if(groupedArray[i][k].longitude!="0"){
dataval+=groupedArray[i][k].longitude+","+groupedArray[i][k].latitude+";";
   listda.push({"type":groupedArray[i][k].type,"devicenumber":groupedArray[i][k].devicenumber,"width":groupedArray[i][k].width,"high":groupedArray[i][k].high,"lastonlinetime":groupedArray[i][k].lastonlinetime,"isonline":groupedArray[i][k].isonline});
      }
        }
        if(dataval.length>0){
         dataval = dataval.substring(0, dataval.length-1);
        }
   if(dataval!=""){
   $.ajax({
    type: "post",
    url: "http://api.map.baidu.com/geoconv/v1/?coords="+dataval+"&from=1&to=5&ak=D2b4558ebed15e52558c6a766c35ee73",
    data:{},
    //async: true,
    dataType:'jsonp',
     //data:{sessionid:sessionStorage.getItem("sid"),devicenumber:"",startTime:"",endTime:""},
    success: function (response) { 
    // console.log(response);

         for(var ii=0;ii<response.result.length;ii++){
               var tmp = [];
             
              //  tmp.push();
            //    console.log(response.result[ii].x+","+response.result[ii].y);
          //  console.log(tmp[ii]);
                baidu_tmp_data.push(new BMap.Point(response.result[ii].x, response.result[ii].y));
             // console.log(data[i]["longitude"]);
        }
          vali++;
           //  console.log(vali+"|"+groupedArray.length);
          if(groupedArray.length==vali){
       
          //   alert(tmp.length);
          setTimeout(function(){   
           console.log(baidu_tmp_data);
       
            //converor.translate(tmp,1,5,translateCallback);
           console.log("23223:"+baidu_tmp_data.length);
           var center;
           var marker=""; var myIcon="";
           for(var i=0;i<baidu_tmp_data.length;i++){
          
          
            var type= listda[i]["type"];
            
   if(type=="0"){
                          
                        type="单色";

                        }

                        if(type=="1"){

                            type="双色";
                        }

                        if(type=="2"){

                            type="全彩";
                        }

 var date = new Date(listda[i]["lastonlinetime"])
                            date=typeof(listda[i]["lastonlinetime"])!="undefined"?date.Format("yyyy-MM-dd hh:mm:ss"):"";
             
               var tmp = "";
               tmp += '<p class="line"><span>设备号：</span>'+listda[i]["devicenumber"]+'</p>';
                tmp += '<p class="line"><span>类型：</span>'+type+'</p>';
                tmp += '<p class="line"><span>分辨率：</span>'+listda[i]["width"]+"*"+listda[i]["high"]+'</p>';
                 tmp += '<p class="line"><span>最后在线时间：</span>'+date+'</p>';
                  // tmp += '<p class="line"><span>精度：</span>'+data[i]["longitude"]+'</p>';
                    // tmp += '<p class="line"><span>维度：</span>'+data[i]["latitude"]+'</p>';
               tmp += '<p class="line"><span>状态：</span>';
              
               if(parseInt(listda[i]["isonline"]) == 1){
                   tmp += '在线';
               }else{
                   tmp += '离线';
               }
               tmp += '</p>';
               

                 if(parseInt(listda[i]["isonline"]) == 1){

                  	  myIcon = new BMap.Icon("http://39.106.197.70/Public/admin/z.png", new BMap.Size(32,32));

                	  marker = new BMap.Marker(baidu_tmp_data[i],{icon:myIcon});
               
             }else{
             	
             	  myIcon = new BMap.Icon("http://39.106.197.70/Public/admin/l.png", new BMap.Size(32,32));
             	
             	  marker = new BMap.Marker(baidu_tmp_data[i],{icon:myIcon});
             }
             
               map.addOverlay(marker);

               addClickHandler(tmp,marker);
               center = baidu_tmp_data[i];
           }

            map.panTo(center);
          },0);
          }else{
  
     //  load(groupedArray);
      if(vali<=groupedArray.length){
                 
  load(groupedArray);
              }

          }
    }
    });
   }
   
 }
 }catch(ex){
                console.log(ex);
                
               }
  
     }
    Date.prototype.Format = function(fmt)   
{ 
//author:wangweizhen
  var o = {   
    "M+" : this.getMonth()+1,                 //月份   
    "d+" : this.getDate(),                    //日
    "h+" : this.getHours(),                   //小时   
    "m+" : this.getMinutes(),                 //分   
    "s+" : this.getSeconds(),                 //秒   
    "q+" : Math.floor((this.getMonth()+3)/3), //季度   
    "S"  : this.getMilliseconds()             //毫秒   
  };   
  if(/(y+)/.test(fmt))   
    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));   
  for(var k in o)   
    if(new RegExp("("+ k +")").test(fmt))   
  fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));   
  return fmt;   
}
</script>

<style scoped>
.allmap {
  width: 100%;
  height: 690px;
  font-family: "微软雅黑";
  border: 1px solid green;
}
.el-tag {
  cursor: pointer;
}
</style>

<style>
/* #menuContentdevicesingle{
  margin: 34px 68px;
} */
</style>

